<template>
    <div class="channel-edit">
        <!-- 我的频道 -->
        <div class="my-channel">
            <div class="title">
                <div class="h1">我的频道</div>
                <van-button @click="isShow = !isShow" style="float: right" plain type="danger" size="small">
                    {{ isShow ? '取消' : '编辑' }}
                </van-button>
            </div>
            <van-grid :column-num="4">
                <van-grid-item v-for="(item, index) in ownList" :key="item.id">
                    <span @click="onSpanClick(index)" class="sp"
                        :class="{active: index == value}">{{ item.name }}</span>
                    <van-icon v-show="isShow && index != 0" @click="del(index)" name="cross" />
                </van-grid-item>
            </van-grid>
        </div>
        <!-- 可选频道 -->
        <div class="choose-channel">
            <div class="title">
                <div class="h1">可选频道</div>
            </div>
            <van-grid :column-num="4">
                <van-grid-item @click="ownList.push(item)" v-for="(item,index) in optionalList" :key="index"
                    :text="item.name" />
                <!-- 每一项加点击事件，点击事件里让被点的那行数据加到 `我的频道` 数组里即可 -->
                <!-- 因为可选频道是一个计算属性，所以我的频道多一个，可选频道自动就会少一个 -->
            </van-grid>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {
            // 父组件传递过来的我的频道
            ownList: {
                // type: Array,
                required: true,
            },
            allChannels: {
                require: true
            },
            value: {
                type: Number,
                require: true
            }
        },
        data() {
            return {
                isShow: false
            };
        },
        computed: {
            // 可选频道
            optionalList() {
                // 遍历所有频道，过滤出不在我的频道里的数据
                // return this.allChannels.filter(item => {
                //     let idx = this.ownList.findIndex(item1 => {
                //         return item1.id == item.id;
                //     })

                //     // 不在我的频道里才过滤出来，那换句话说就是下标为-1才过滤出来
                //     return idx == -1
                // })
                let list = [];
                for (let i = 0; i < this.allChannels.length; i++) {
                    // 判断每一项在不在我的频道里
                    // 先假设不在
                    let flag = true
                    for (let j = 0; j < this.ownList.length; j++) {
                        if (this.ownList[j].id == this.allChannels[i].id) {
                            // 代表在，改成false
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        list.push(this.allChannels[i])
                    }
                }
                return list

            }
        },
        watch: {},
        created() {

        },
        mounted() {},
        methods: {
            onSpanClick(index) {
                this.$emit('input', index)
                this.$emit('close')
            },
            // 删除
            del(index) {

                // 删除频道
                this.ownList.splice(index, 1)

                // 判断要删的下标是否小于当前选中的下标
                if (index < this.value) {

                    // 如果是就要让父组件里选中的下标-1，所以把-1的值传递给了父组件
                    this.$emit('input', this.value - 1)
                }
            }
        },
    }
</script>
<style scoped lang="less">
    .channel-edit {
        padding: 0 20px;

        .my-channel {
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;

            }
        }

        .title {
            margin: 10px 0;

            .h1 {
                font-size: 18px;
            }
        }

        .sp {
            font-size: 14px;
        }

        .van-icon-cross {

            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 14px;
        }

        .active {
            color: red;
        }
    }
</style>